<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>屏幕检测工具</title>
    <style>
      * {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
        font-family: 'SF Pro Display', 'PingFang SC', 'Helvetica Neue', Arial,
          sans-serif;
      }

      :root {
        --primary-bg: #e6e7ee;
        --secondary-bg: #ffffff;
        --shadow-light: #ffffff;
        --shadow-dark: #d1d9e6;
        --accent-color: #667eea;
        --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        --success-color: #4ecdc4;
        --danger-color: #ff6b6b;
        --warning-color: #feca57;
        --text-primary: #2d3748;
        --text-secondary: #718096;
        --glass-bg: rgba(255, 255, 255, 0.25);
        --glass-border: rgba(255, 255, 255, 0.18);
      }

      body {
        background: var(--primary-bg);
        color: var(--text-primary);
        min-height: 100vh;
        padding: 20px;
        display: flex;
        flex-direction: column;
        align-items: center;
        transition: all 0.3s ease;
        animation: pageLoad 0.8s ease;
      }

      @keyframes pageLoad {
        from {
          opacity: 0;
          transform: translateY(20px);
        }
        to {
          opacity: 1;
          transform: translateY(0);
        }
      }

      .container {
        width: 100%;
        max-width: 1400px;
        background: var(--primary-bg);
        border-radius: 30px;
        padding: 40px;
        box-shadow: 20px 20px 60px var(--shadow-dark),
          -20px -20px 60px var(--shadow-light);
        margin-top: 20px;
        transition: all 0.3s ease;
        animation: containerFloat 1s ease 0.2s both;
      }

      @keyframes containerFloat {
        from {
          opacity: 0;
          transform: translateY(30px) scale(0.95);
        }
        to {
          opacity: 1;
          transform: translateY(0) scale(1);
        }
      }

      .container:hover {
        box-shadow: 25px 25px 70px var(--shadow-dark),
          -25px -25px 70px var(--shadow-light);
      }

      header {
        text-align: center;
        margin-bottom: 40px;
        padding: 30px;
        background: var(--primary-bg);
        border-radius: 25px;
        box-shadow: 10px 10px 20px var(--shadow-dark),
          -10px -10px 20px var(--shadow-light);
        animation: headerSlide 0.8s ease 0.4s both;
      }

      @keyframes headerSlide {
        from {
          opacity: 0;
          transform: translateY(-30px);
        }
        to {
          opacity: 1;
          transform: translateY(0);
        }
      }

      h1 {
        font-size: 3.2rem;
        margin-bottom: 15px;
        background: var(--accent-gradient);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        font-weight: 700;
        animation: titleGlow 3s ease-in-out infinite alternate;
      }

      @keyframes titleGlow {
        from {
          filter: brightness(1);
        }
        to {
          filter: brightness(1.2);
        }
      }

      .subtitle {
        font-size: 1.3rem;
        color: var(--text-secondary);
        margin-bottom: 30px;
        font-weight: 500;
      }

      .test-categories {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        gap: 30px;
        margin-bottom: 40px;
        animation: categoriesSlide 0.8s ease 0.6s both;
      }

      @keyframes categoriesSlide {
        from {
          opacity: 0;
          transform: translateY(20px);
        }
        to {
          opacity: 1;
          transform: translateY(0);
        }
      }

      .test-category {
        background: var(--primary-bg);
        border-radius: 25px;
        padding: 30px;
        box-shadow: 12px 12px 24px var(--shadow-dark),
          -12px -12px 24px var(--shadow-light);
        transition: all 0.3s ease;
        position: relative;
        overflow: hidden;
      }

      .launch-date {
        /* 已废弃：不再显示 launch-date */
        display: none;
      }

      .test-category::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(
          90deg,
          transparent,
          rgba(255, 255, 255, 0.1),
          transparent
        );
        transition: left 0.8s;
      }

      .test-category:hover::before {
        left: 100%;
      }

      .test-category:hover {
        transform: translateY(-5px);
        box-shadow: 16px 16px 32px var(--shadow-dark),
          -16px -16px 32px var(--shadow-light);
      }

      .category-title {
        font-size: 1.6rem;
        margin-bottom: 20px;
        color: var(--accent-color);
        display: flex;
        align-items: center;
        font-weight: 600;
      }

      .category-title::before {
        content: attr(data-icon);
        margin-right: 12px;
        font-size: 1.8rem;
        animation: iconBounce 2s ease-in-out infinite;
      }

      @keyframes iconBounce {
        0%,
        100% {
          transform: scale(1);
        }
        50% {
          transform: scale(1.1);
        }
      }

      .test-buttons {
        display: flex;
        flex-direction: column;
        gap: 15px;
      }

      /* 测试项 + 问号说明 */
      .test-item {
        display: flex;
        align-items: center;
        gap: 10px;
        position: relative;
      }
      .test-item .test-btn {
        flex: 1;
      }
      .help-icon {
        width: 26px;
        height: 26px;
        border-radius: 50%;
        background: var(--accent-color);
        color: #fff;
        font-size: 16px;
        font-weight: 700;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        cursor: help;
        box-shadow: 4px 4px 8px var(--shadow-dark),
          -4px -4px 8px var(--shadow-light);
        user-select: none;
      }
      .help-icon:focus {
        outline: 2px solid rgba(102, 126, 234, 0.45);
        outline-offset: 2px;
      }
      .tooltip {
        position: absolute;
        left: calc(100% - 28px);
        top: 50%;
        transform: translateY(-50%);
        background: rgba(0, 0, 0, 0.85);
        color: #fff;
        padding: 10px 12px;
        border-radius: 10px;
        box-shadow: 6px 6px 14px rgba(0, 0, 0, 0.35);
        max-width: 360px;
        font-size: 0.95rem;
        line-height: 1.6;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.2s ease, transform 0.2s ease;
        z-index: 10003;
      }
      /* 取消移入触发，本地 tooltip 仅承载文案 */
      .test-item > .tooltip {
        display: none !important;
      }

      /* 全局固定层 tooltip，点击触发，避免被裁剪 */
      #globalTooltip {
        position: fixed;
        background: rgba(0, 0, 0, 0.85);
        color: #fff;
        padding: 10px 12px;
        border-radius: 10px;
        box-shadow: 6px 6px 14px rgba(0, 0, 0, 0.35);
        max-width: 360px;
        font-size: 0.95rem;
        line-height: 1.6;
        opacity: 0;
        visibility: hidden;
        transform: translateY(-50%);
        transition: opacity 0.15s ease;
        z-index: 10003;
      }
      #globalTooltip.visible {
        opacity: 1;
        visibility: visible;
      }
      #globalTooltip::after {
        content: '';
        position: absolute;
        right: 100%;
        top: 50%;
        transform: translateY(-50%);
        border-width: 6px;
        border-style: solid;
        border-color: transparent rgba(0, 0, 0, 0.85) transparent transparent;
      }

      .test-btn {
        background: var(--primary-bg);
        color: var(--text-primary);
        border: none;
        padding: 16px 24px;
        border-radius: 15px;
        cursor: pointer;
        font-weight: 600;
        transition: all 0.3s ease;
        font-size: 1rem;
        box-shadow: 8px 8px 16px var(--shadow-dark),
          -8px -8px 16px var(--shadow-light);
        position: relative;
        overflow: hidden;
        text-align: left;
      }

      .test-btn::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(
          90deg,
          transparent,
          rgba(255, 255, 255, 0.2),
          transparent
        );
        transition: left 0.5s;
      }

      .test-btn:hover::before {
        left: 100%;
      }

      .test-btn:hover {
        transform: translateY(-3px);
        box-shadow: 12px 12px 24px var(--shadow-dark),
          -12px -12px 24px var(--shadow-light);
      }

      .test-btn:active {
        transform: translateY(0);
        box-shadow: inset 6px 6px 12px var(--shadow-dark),
          inset -6px -6px 12px var(--shadow-light);
      }

      .screen-info {
        background: var(--primary-bg);
        border-radius: 25px;
        padding: 30px;
        margin-bottom: 30px;
        box-shadow: 10px 10px 20px var(--shadow-dark),
          -10px -10px 20px var(--shadow-light);
        animation: infoSlide 0.8s ease 0.8s both;
      }

      @keyframes infoSlide {
        from {
          opacity: 0;
          transform: translateY(20px);
        }
        to {
          opacity: 1;
          transform: translateY(0);
        }
      }

      .info-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 20px;
      }

      .info-item {
        text-align: center;
        padding: 20px;
        background: var(--primary-bg);
        border-radius: 15px;
        box-shadow: inset 6px 6px 12px var(--shadow-dark),
          inset -6px -6px 12px var(--shadow-light);
      }

      .info-label {
        font-size: 0.9rem;
        color: var(--text-secondary);
        margin-bottom: 8px;
        font-weight: 500;
      }

      .info-value {
        font-size: 1.2rem;
        color: var(--accent-color);
        font-weight: 600;
      }

      /* 全屏测试模式样式 */
      .fullscreen-test {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        z-index: 9999;
        display: none;
        justify-content: center;
        align-items: center;
        cursor: pointer;
      }

      .test-controls {
        position: fixed;
        bottom: 30px;
        left: 50%;
        transform: translateX(-50%);
        display: flex;
        gap: 15px;
        z-index: 10002;
        background: rgba(0, 0, 0, 0.8);
        padding: 15px 25px;
        border-radius: 25px;
        backdrop-filter: blur(10px);
      }

      /* 隐藏模式：隐藏操作栏与测试标题 */
      .hide-ui .test-controls {
        display: none !important;
      }
      .hide-ui .test-title {
        display: none !important;
      }

      .control-btn {
        background: rgba(255, 255, 255, 0.2);
        color: white;
        border: none;
        padding: 12px 20px;
        border-radius: 15px;
        cursor: pointer;
        font-weight: 600;
        transition: all 0.3s ease;
        backdrop-filter: blur(5px);
      }

      .control-btn:hover {
        background: rgba(255, 255, 255, 0.3);
        transform: translateY(-2px);
      }

      /* 测试图案样式 */
      .dead-pixel-test {
        width: 100%;
        height: 100%;
        transition: background-color 0.3s ease;
      }

      .gradient-test {
        width: 100%;
        height: 100%;
      }

      .grid-test {
        width: 100%;
        height: 100%;
        background-image: linear-gradient(
            rgba(255, 255, 255, 0.3) 1px,
            transparent 1px
          ),
          linear-gradient(90deg, rgba(255, 255, 255, 0.3) 1px, transparent 1px);
        background-size: 50px 50px;
        background-color: #333;
      }

      .response-test {
        width: 100%;
        height: 100%;
        background: #000;
        position: relative;
        overflow: hidden;
      }

      .moving-box {
        width: 50px;
        height: 50px;
        background: white;
        position: absolute;
        top: 50%;
        animation: moveBox 2s linear infinite;
      }

      @keyframes moveBox {
        0% {
          left: -50px;
        }
        100% {
          left: 100%;
        }
      }

      .color-accuracy-test {
        width: 100%;
        height: 100%;
        display: grid;
        grid-template-columns: repeat(8, 1fr);
        grid-template-rows: repeat(6, 1fr);
      }

      .color-block {
        display: flex;
        justify-content: center;
        align-items: center;
        color: white;
        font-weight: bold;
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
      }

      .instructions {
        background: var(--primary-bg);
        border-radius: 25px;
        padding: 30px;
        margin-top: 40px;
        box-shadow: 10px 10px 20px var(--shadow-dark),
          -10px -10px 20px var(--shadow-light);
        animation: instructionsSlide 0.8s ease 1s both;
      }

      @keyframes instructionsSlide {
        from {
          opacity: 0;
          transform: translateY(30px);
        }
        to {
          opacity: 1;
          transform: translateY(0);
        }
      }

      .instructions h3 {
        color: var(--accent-color);
        margin-bottom: 20px;
        font-size: 1.4rem;
        font-weight: 600;
      }

      .instructions ul {
        padding-left: 25px;
        margin-bottom: 20px;
      }

      .instructions li {
        margin-bottom: 12px;
        line-height: 1.7;
        color: var(--text-secondary);
        font-weight: 500;
      }

      .instructions p {
        color: var(--text-secondary);
        font-style: italic;
        font-weight: 500;
        padding: 15px;
        background: rgba(102, 126, 234, 0.1);
        border-radius: 15px;
        border-left: 4px solid var(--accent-color);
      }

      footer {
        margin-top: 40px;
        text-align: center;
        color: var(--text-secondary);
        font-size: 0.95rem;
        padding: 25px;
        background: var(--primary-bg);
        border-radius: 20px;
        box-shadow: 6px 6px 12px var(--shadow-dark),
          -6px -6px 12px var(--shadow-light);
        animation: footerFade 0.8s ease 1.2s both;
      }

      @keyframes footerFade {
        from {
          opacity: 0;
        }
        to {
          opacity: 1;
        }
      }

      /* 响应式设计 */
      @media (max-width: 768px) {
        .container {
          padding: 20px;
        }

        h1 {
          font-size: 2.5rem;
        }

        .test-categories {
          grid-template-columns: 1fr;
        }

        .info-grid {
          grid-template-columns: repeat(2, 1fr);
        }
      }
    </style>
  </head>
  <body>
    <div class="container">
      <header>
        <h1>🖥️ 屏幕检测工具</h1>
        <p class="subtitle">专业的显示器测试与校准工具</p>
      </header>

      <!-- 屏幕信息显示 -->
      <div class="screen-info">
        <h3
          style="
            color: var(--accent-color);
            margin-bottom: 20px;
            font-size: 1.4rem;
          "
        >
          📊 屏幕信息
        </h3>
        <div class="info-grid">
          <div class="info-item">
            <div class="info-label">屏幕分辨率</div>
            <div class="info-value" id="resolution">-</div>
          </div>
          <div class="info-item">
            <div class="info-label">像素密度 (PPI)</div>
            <div class="info-value" id="ppi">-</div>
          </div>
          <div class="info-item">
            <div class="info-label">色彩深度</div>
            <div class="info-value" id="colorDepth">-</div>
          </div>
          <div class="info-item">
            <div class="info-label">刷新率</div>
            <div class="info-value" id="refreshRate">-</div>
          </div>
          <div class="info-item">
            <div class="info-label">设备像素比</div>
            <div class="info-value" id="devicePixelRatio">-</div>
          </div>
          <div class="info-item">
            <div class="info-label">浏览器</div>
            <div class="info-value" id="browser">-</div>
          </div>
        </div>
      </div>

      <!-- 测试分类 -->
      <div class="test-categories">
        <!-- 基础显示检测 -->
        <div class="test-category">
          <h3 class="category-title" data-icon="🛠️">基础显示检测</h3>
          <div class="test-buttons">
            <div class="test-item">
              <button class="test-btn" onclick="startDeadPixelTest()">
                坏点/亮点检测
              </button>
              <span class="help-icon" tabindex="0">?</span>
              <div class="tooltip">
                全屏纯色轮换，识别坏点、亮点与异常像素。
              </div>
            </div>
            <div class="test-item">
              <button class="test-btn" onclick="startUniformityTest()">
                屏幕均匀性测试
              </button>
              <span class="help-icon" tabindex="0">?</span>
              <div class="tooltip">
                多灰阶与暗场全屏，观察亮度/色彩均匀与漏光。
              </div>
            </div>
            <div class="test-item">
              <button class="test-btn" onclick="startGeometryTest()">
                几何失真测试
              </button>
              <span class="help-icon" tabindex="0">?</span>
              <div class="tooltip">
                网格与直线全屏显示，判断形变、比例与像素对齐。
              </div>
            </div>
          </div>
        </div>

        <!-- 色彩与画质测试 -->
        <div class="test-category">
          <h3 class="category-title" data-icon="🎨">色彩与画质测试</h3>
          <div class="test-buttons">
            <div class="test-item">
              <button class="test-btn" onclick="startColorAccuracyTest()">
                色彩准确性测试
              </button>
              <span class="help-icon" tabindex="0">?</span>
              <div class="tooltip">
                标准色板全屏，检查色彩还原准确度与色偏。
              </div>
            </div>
            <div class="test-item">
              <button class="test-btn" onclick="startGradientTest()">
                饱和度与渐变测试
              </button>
              <span class="help-icon" tabindex="0">?</span>
              <div class="tooltip">
                高饱和与平滑渐变，观察断层/色带与过渡平滑度。
              </div>
            </div>
            <div class="test-item">
              <button class="test-btn" onclick="startWhiteBalanceTest()">
                白平衡测试
              </button>
              <span class="help-icon" tabindex="0">?</span>
              <div class="tooltip">灰阶与白场对比，评估白平衡与色温偏差。</div>
            </div>
            <div class="test-item">
              <button class="test-btn" onclick="startContrastTest()">
                对比度测试
              </button>
              <span class="help-icon" tabindex="0">?</span>
              <div class="tooltip">
                黑白对比与暗部细节可见性，评估对比度表现。
              </div>
            </div>
          </div>
        </div>

        <!-- 动态性能测试 -->
        <div class="test-category">
          <h3 class="category-title" data-icon="⚙️">动态性能测试</h3>
          <div class="test-buttons">
            <div class="test-item">
              <button class="test-btn" onclick="startResponseTest()">
                响应时间测试
              </button>
              <span class="help-icon" tabindex="0">?</span>
              <div class="tooltip">
                移动对象高对比显示，观察拖影与响应速度。
              </div>
            </div>
            <div class="test-item">
              <button class="test-btn" onclick="startRefreshRateTest()">
                刷新率监测
              </button>
              <span class="help-icon" tabindex="0">?</span>
              <div class="tooltip">估算刷新率并观察撕裂、卡顿与跳帧现象。</div>
            </div>
            <div class="test-item">
              <button class="test-btn" onclick="startGhostingTest()">
                残影检测
              </button>
              <span class="help-icon" tabindex="0">?</span>
              <div class="tooltip">高对比运动场景下的残影程度评估。</div>
            </div>
            <div class="test-item">
              <button class="test-btn" onclick="startScrollingClarityTest()">
                动态清晰度（滚动）测试
              </button>
              <span class="help-icon" tabindex="0">?</span>
              <div class="tooltip">
                滚动文本评估运动模糊与可读性，↑/↓ 调整速度。
              </div>
            </div>
            <div class="test-item">
              <button class="test-btn" onclick="startPWMSwingTest()">
                PWM调光闪烁检测（视觉）
              </button>
              <span class="help-icon" tabindex="0">?</span>
              <div class="tooltip">
                亮点抖动配合手机拍摄或晃笔，判断高频闪烁。
              </div>
            </div>
          </div>
        </div>

        <!-- 几何与物理特性 -->
        <div class="test-category">
          <h3 class="category-title" data-icon="📐">几何与物理特性</h3>
          <div class="test-buttons">
            <div class="test-item">
              <button class="test-btn" onclick="startViewAngleTest()">
                视角一致性测试
              </button>
              <span class="help-icon" tabindex="0">?</span>
              <div class="tooltip">不同角度观察色彩与亮度的一致性与变化。</div>
            </div>
            <div class="test-item">
              <button class="test-btn" onclick="startFlickerTest()">
                闪烁检测
              </button>
              <span class="help-icon" tabindex="0">?</span>
              <div class="tooltip">闪烁/条纹图样暴露频闪是否明显可见。</div>
            </div>
            <div class="test-item">
              <button class="test-btn" onclick="startSignalTest()">
                信号稳定性测试
              </button>
              <span class="help-icon" tabindex="0">?</span>
              <div class="tooltip">
                条纹稳定性与抖动情况，评估线缆/接口信号质量。
              </div>
            </div>
          </div>
        </div>

        <!-- 清晰度与锐度检测 -->
        <div class="test-category">
          <h3 class="category-title" data-icon="🔍">清晰度与锐度检测</h3>
          <div class="test-buttons">
            <div class="test-item">
              <button class="test-btn" onclick="startTextSharpnessTest()">
                文字清晰度与彩边测试
              </button>
              <span class="help-icon" tabindex="0">?</span>
              <div class="tooltip">
                黑/白底细小字号对比，观察边缘锐度与彩边现象。
              </div>
            </div>
            <div class="test-item">
              <button class="test-btn" onclick="startFineLineSeparationTest()">
                精细线条分离度测试
              </button>
              <span class="help-icon" tabindex="0">?</span>
              <div class="tooltip">
                全屏高频条纹不同密度与方向，检测线条分离与粘连。
              </div>
            </div>
          </div>
        </div>

        <!-- 色彩与均匀性深度检测 -->
        <div class="test-category">
          <h3 class="category-title" data-icon="🌫️">色彩与均匀性深度检测</h3>
          <div class="test-buttons">
            <div class="test-item">
              <button
                class="test-btn"
                onclick="startLowBrightnessUniformityTest()"
              >
                低亮度均匀性与脏屏效应测试
              </button>
              <span class="help-icon" tabindex="0">?</span>
              <div class="tooltip">
                深灰暗场全屏轮换，暴露背光不均匀与脏屏效应。
              </div>
            </div>
            <div class="test-item">
              <button class="test-btn" onclick="startColorCrosstalkTest()">
                色彩串扰测试
              </button>
              <span class="help-icon" tabindex="0">?</span>
              <div class="tooltip">
                RGB切换与灰背景下，观察周围是否被染色（串扰）。
              </div>
            </div>
          </div>
        </div>

        <!-- 信号与接口质量检测 -->
        <div class="test-category">
          <h3 class="category-title" data-icon="🔌">信号与接口质量检测</h3>
          <div class="test-buttons">
            <div class="test-item">
              <button class="test-btn" onclick="startGradientBandwidthTest()">
                梯度带宽测试
              </button>
              <span class="help-icon" tabindex="0">?</span>
              <div class="tooltip">
                多角度/不同频率条纹全屏，评估带宽与采样质量。
              </div>
            </div>
          </div>
        </div>

        <!-- 实用综合检测 -->
        <div class="test-category">
          <h3 class="category-title" data-icon="🧪">实用综合检测</h3>
          <div class="test-buttons">
            <div class="test-item">
              <button
                class="test-btn"
                onclick="startPresetModeComparisonTest()"
              >
                显示器预设模式对比
              </button>
              <span class="help-icon" tabindex="0">?</span>
              <div class="tooltip">
                切换显示器预设（sRGB/影院/游戏/标准）进行综合画质对比。
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 使用说明 -->
      <div class="instructions">
        <h3>📋 使用说明</h3>
        <ul>
          <li>
            <strong>坏点检测：</strong>全屏显示纯色，仔细观察是否有异常像素点
          </li>
          <li><strong>色彩测试：</strong>观察色彩过渡是否平滑，有无色偏现象</li>
          <li><strong>响应测试：</strong>观察移动物体是否有拖影或模糊</li>
          <li><strong>几何测试：</strong>检查直线和网格是否变形</li>
          <li>
            <strong>切换与退出：</strong
            >点击屏幕切换下一项（循环），按ESC键退出当前测试
          </li>
        </ul>
        <p>💡 建议在正常光线环境下进行测试，避免强光直射或过暗环境影响判断。</p>
      </div>

      <footer>
        <p>© 2024 屏幕检测工具 - 专业显示器测试解决方案</p>
      </footer>
    </div>

    <!-- 全屏测试容器 -->
    <div class="fullscreen-test" id="fullscreenTest">
      <div class="test-controls">
        <button class="control-btn" onclick="previousTest()">⬅️ 上一个</button>
        <button class="control-btn" onclick="nextTest()">➡️ 下一个</button>
        <button class="control-btn" onclick="exitFullscreen()">❌ 退出</button>
      </div>
    </div>

    <script>
      // 全局变量
      let currentTest = null
      let currentTestIndex = 0
      let testSequence = []
      let animationId = null

      // 初始化屏幕信息
      function initScreenInfo() {
        // 获取屏幕分辨率
        const resolution = `${screen.width} × ${screen.height}`
        document.getElementById('resolution').textContent = resolution

        // 计算PPI（假设显示器尺寸，实际无法准确获取）
        const diagonal = Math.sqrt(
          screen.width * screen.width + screen.height * screen.height
        )
        const ppi = Math.round(diagonal / 24) // 假设24寸显示器
        document.getElementById('ppi').textContent = ppi

        // 色彩深度
        document.getElementById(
          'colorDepth'
        ).textContent = `${screen.colorDepth} bit`

        // 设备像素比
        document.getElementById('devicePixelRatio').textContent =
          window.devicePixelRatio

        // 刷新率（现代浏览器支持）
        if ('getDisplayMedia' in navigator.mediaDevices) {
          document.getElementById('refreshRate').textContent = '60Hz+'
        } else {
          document.getElementById('refreshRate').textContent = '未知'
        }

        // 浏览器信息
        const browser = navigator.userAgent.includes('Chrome')
          ? 'Chrome'
          : navigator.userAgent.includes('Firefox')
          ? 'Firefox'
          : navigator.userAgent.includes('Safari')
          ? 'Safari'
          : navigator.userAgent.includes('Edge')
          ? 'Edge'
          : '其他'
        document.getElementById('browser').textContent = browser
      }

      // 进入全屏测试模式
      function enterFullscreen(testFunction) {
        const testContainer = document.getElementById('fullscreenTest')
        testContainer.style.display = 'flex'

        // 完全重置容器状态
        testContainer.innerHTML =
          '<div class="test-controls"><button class="control-btn" onclick="previousTest()">⬅️ 上一个</button><button class="control-btn" onclick="nextTest()">➡️ 下一个</button><button class="control-btn" onclick="hideUI()">🙈 隐藏操作</button><button class="control-btn" onclick="exitFullscreen()">❌ 退出</button></div>'
        testContainer.style.background = ''
        testContainer.style.backgroundColor = ''

        // 请求全屏
        if (testContainer.requestFullscreen) {
          testContainer.requestFullscreen()
        } else if (testContainer.webkitRequestFullscreen) {
          testContainer.webkitRequestFullscreen()
        } else if (testContainer.msRequestFullscreen) {
          testContainer.msRequestFullscreen()
        }

        currentTest = testFunction
        testFunction()
      }

      // 退出全屏
      function exitFullscreen() {
        const testContainer = document.getElementById('fullscreenTest')
        testContainer.style.display = 'none'
        testContainer.innerHTML =
          '<div class="test-controls"><button class="control-btn" onclick="previousTest()">⬅️ 上一个</button><button class="control-btn" onclick="nextTest()">➡️ 下一个</button><button class="control-btn" onclick="hideUI()">🙈 隐藏操作</button><button class="control-btn" onclick="exitFullscreen()">❌ 退出</button></div>'

        // 仅在仍处于全屏时退出全屏，避免重复触发
        if (document.fullscreenElement) {
          if (document.exitFullscreen) {
            document.exitFullscreen()
          } else if (document.webkitExitFullscreen) {
            document.webkitExitFullscreen()
          } else if (document.msExitFullscreen) {
            document.msExitFullscreen()
          }
        }

        if (animationId) {
          cancelAnimationFrame(animationId)
          animationId = null
        }

        currentTest = null
        currentTestIndex = 0
        testSequence = []

        // 移除隐藏模式类
        testContainer.classList.remove('hide-ui')
      }

      // 隐藏操作栏与标题
      function hideUI() {
        const testContainer = document.getElementById('fullscreenTest')
        testContainer.classList.add('hide-ui')
      }

      // 坏点/亮点检测
      function startDeadPixelTest() {
        testSequence = ['#FF0000', '#00FF00', '#0000FF', '#FFFFFF', '#000000']
        currentTestIndex = 0
        enterFullscreen(deadPixelTest)
      }

      function deadPixelTest() {
        const testContainer = document.getElementById('fullscreenTest')
        const color = testSequence[currentTestIndex]
        testContainer.style.backgroundColor = color

        // 清理之前的标签（保留控制按钮）
        const existingLabels = testContainer.querySelectorAll(
          'div:not(.test-controls)'
        )
        existingLabels.forEach((label) => label.remove())

        // 添加颜色标签
        const colorNames = ['红色', '绿色', '蓝色', '白色', '黑色']
        const label = document.createElement('div')
        label.className = 'test-title'
        label.style.cssText = `
          position: fixed;
          top: 50px;
          left: 50%;
          transform: translateX(-50%);
          color: ${color === '#000000' ? '#FFFFFF' : '#000000'};
          font-size: 24px;
          font-weight: bold;
          z-index: 10001;
          pointer-events: none;
          text-align: center;
          white-space: nowrap;
        `
        label.textContent = `${colorNames[currentTestIndex]} - 检查坏点和亮点`
        testContainer.appendChild(label)
      }

      // 屏幕均匀性测试
      function startUniformityTest() {
        testSequence = ['#808080', '#404040', '#C0C0C0']
        currentTestIndex = 0
        enterFullscreen(uniformityTest)
      }

      function uniformityTest() {
        const testContainer = document.getElementById('fullscreenTest')
        const color = testSequence[currentTestIndex]
        testContainer.style.backgroundColor = color

        // 清理之前的标签（保留控制按钮）
        const existingLabels = testContainer.querySelectorAll(
          'div:not(.test-controls)'
        )
        existingLabels.forEach((label) => label.remove())

        const grayLevels = ['中灰', '暗灰', '亮灰']
        const label = document.createElement('div')
        label.className = 'test-title'
        label.style.cssText = `
          position: fixed;
          top: 50px;
          left: 50%;
          transform: translateX(-50%);
          color: white;
          font-size: 24px;
          font-weight: bold;
          z-index: 10001;
          text-shadow: 2px 2px 4px rgba(0,0,0,0.8);
          pointer-events: none;
          text-align: center;
          white-space: nowrap;
        `
        label.textContent = `${grayLevels[currentTestIndex]} - 检查亮度均匀性`
        testContainer.appendChild(label)
      }

      // 几何失真测试
      function startGeometryTest() {
        enterFullscreen(geometryTest)
      }

      function geometryTest() {
        const testContainer = document.getElementById('fullscreenTest')
        testContainer.innerHTML = `
          <div class="grid-test"></div>
          <div class="test-title" style="position: fixed; top: 50px; left: 50%; transform: translateX(-50%); color: white; font-size: 24px; font-weight: bold; z-index: 10001; text-shadow: 2px 2px 4px rgba(0,0,0,0.8); pointer-events: none; text-align: center; white-space: nowrap;">网格测试 - 检查几何失真</div>
          <div class="test-controls">
            <button class="control-btn" onclick="previousTest()">⬅️ 上一个</button>
            <button class="control-btn" onclick="nextTest()">➡️ 下一个</button>
            <button class="control-btn" onclick="hideUI()">🙈 隐藏操作</button>
            <button class="control-btn" onclick="exitFullscreen()">❌ 退出</button>
          </div>
        `
      }

      // 色彩准确性测试
      function startColorAccuracyTest() {
        enterFullscreen(colorAccuracyTest)
      }

      function colorAccuracyTest() {
        const testContainer = document.getElementById('fullscreenTest')
        const colors = [
          '#FF0000',
          '#FF8000',
          '#FFFF00',
          '#80FF00',
          '#00FF00',
          '#00FF80',
          '#00FFFF',
          '#0080FF',
          '#0000FF',
          '#8000FF',
          '#FF00FF',
          '#FF0080',
          '#800000',
          '#808000',
          '#008000',
          '#008080',
          '#000080',
          '#800080',
          '#C0C0C0',
          '#808080',
          '#404040',
          '#000000',
          '#FFFFFF',
          '#FFE4E1',
          '#F0F8FF',
          '#F5F5DC',
          '#FFE4B5',
          '#DDA0DD',
          '#98FB98',
          '#87CEEB',
          '#DEB887',
          '#F4A460',
          '#2E8B57',
          '#4682B4',
          '#D2691E',
          '#CD853F',
          '#A0522D',
          '#8B4513',
          '#556B2F',
          '#8B008B',
          '#B22222',
          '#DC143C',
          '#FF1493',
          '#FF69B4',
          '#FFB6C1',
          '#FFC0CB',
          '#FFEFD5',
          '#FFEBCD',
        ]

        let html = '<div class="color-accuracy-test">'
        colors.forEach((color, index) => {
          html += `<div class="color-block" style="background-color: ${color}">${color}</div>`
        })
        html += '</div>'
        html +=
          '<div class="test-title" style="position: fixed; top: 20px; left: 50%; transform: translateX(-50%); color: white; font-size: 24px; font-weight: bold; z-index: 10001; text-shadow: 2px 2px 4px rgba(0,0,0,0.8); pointer-events: none; text-align: center; white-space: nowrap;">色彩准确性测试</div>'
        html +=
          '<div class="test-controls"><button class="control-btn" onclick="previousTest()">⬅️ 上一个</button><button class="control-btn" onclick="nextTest()">➡️ 下一个</button><button class="control-btn" onclick="hideUI()">🙈 隐藏操作</button><button class="control-btn" onclick="exitFullscreen()">❌ 退出</button></div>'

        testContainer.innerHTML = html
      }

      // 饱和度与渐变测试
      function startGradientTest() {
        testSequence = [
          'linear-gradient(to right, #000000, #FFFFFF)',
          'linear-gradient(to right, #FF0000, #00FF00, #0000FF)',
          'linear-gradient(to bottom, #000000, #808080, #FFFFFF)',
          'radial-gradient(circle, #FFFFFF, #000000)',
        ]
        currentTestIndex = 0
        enterFullscreen(gradientTest)
      }

      function gradientTest() {
        const testContainer = document.getElementById('fullscreenTest')
        const gradient = testSequence[currentTestIndex]
        testContainer.style.background = gradient

        // 清理之前的标签
        const existingLabels = testContainer.querySelectorAll(
          'div:not(.test-controls)'
        )
        existingLabels.forEach((label) => label.remove())

        const gradientNames = ['黑白渐变', '彩色渐变', '垂直灰阶', '径向渐变']
        const label = document.createElement('div')
        label.className = 'test-title'
        label.style.cssText = `
          position: fixed;
          top: 50px;
          left: 50%;
          transform: translateX(-50%);
          color: white;
          font-size: 24px;
          font-weight: bold;
          z-index: 10001;
          text-shadow: 2px 2px 4px rgba(0,0,0,0.8);
          pointer-events: none;
          text-align: center;
          white-space: nowrap;
        `
        label.textContent = `${gradientNames[currentTestIndex]} - 检查渐变平滑度`
        testContainer.appendChild(label)
      }

      // 白平衡测试
      function startWhiteBalanceTest() {
        testSequence = ['#FFFFFF', '#F8F8FF', '#FFFAF0', '#FFF8DC']
        currentTestIndex = 0
        enterFullscreen(whiteBalanceTest)
      }

      function whiteBalanceTest() {
        const testContainer = document.getElementById('fullscreenTest')
        const color = testSequence[currentTestIndex]
        testContainer.style.backgroundColor = color

        // 清理之前的标签
        const existingLabels = testContainer.querySelectorAll(
          'div:not(.test-controls)'
        )
        existingLabels.forEach((label) => label.remove())

        const whiteTypes = ['纯白', '冷白', '暖白', '米白']
        const label = document.createElement('div')
        label.className = 'test-title'
        label.style.cssText = `
          position: fixed;
          top: 50px;
          left: 50%;
          transform: translateX(-50%);
          color: #333333;
          font-size: 24px;
          font-weight: bold;
          z-index: 10001;
          pointer-events: none;
          text-align: center;
          white-space: nowrap;
        `
        label.textContent = `${whiteTypes[currentTestIndex]} - 检查白平衡`
        testContainer.appendChild(label)
      }

      // 对比度测试
      function startContrastTest() {
        enterFullscreen(contrastTest)
      }

      function contrastTest() {
        const testContainer = document.getElementById('fullscreenTest')
        testContainer.innerHTML = `
          <div style="width: 100%; height: 100%; background: linear-gradient(to right, #000000 0%, #111111 10%, #222222 20%, #333333 30%, #444444 40%, #555555 50%, #666666 60%, #777777 70%, #888888 80%, #999999 90%, #FFFFFF 100%); display: flex; align-items: center; justify-content: center;">
            <div class="test-title" style="color: white; font-size: 24px; font-weight: bold; text-shadow: 2px 2px 4px rgba(0,0,0,0.8); pointer-events: none; text-align: center;">对比度测试 - 观察灰阶过渡</div>
          </div>
          <div class="test-controls">
            <button class="control-btn" onclick="previousTest()">⬅️ 上一个</button>
            <button class="control-btn" onclick="nextTest()">➡️ 下一个</button>
            <button class="control-btn" onclick="hideUI()">🙈 隐藏操作</button>
            <button class="control-btn" onclick="exitFullscreen()">❌ 退出</button>
          </div>
        `
      }

      // 响应时间测试
      function startResponseTest() {
        enterFullscreen(responseTest)
      }

      function responseTest() {
        const testContainer = document.getElementById('fullscreenTest')
        testContainer.innerHTML = `
          <div class="response-test">
            <div class="moving-box"></div>
          </div>
          <div class="test-title" style="position: fixed; top: 50px; left: 50%; transform: translateX(-50%); color: white; font-size: 24px; font-weight: bold; z-index: 10001; pointer-events: none; text-align: center; white-space: nowrap;">响应时间测试 - 观察拖影现象</div>
          <div class="test-controls">
            <button class="control-btn" onclick="previousTest()">⬅️ 上一个</button>
            <button class="control-btn" onclick="nextTest()">➡️ 下一个</button>
            <button class="control-btn" onclick="hideUI()">🙈 隐藏操作</button>
            <button class="control-btn" onclick="exitFullscreen()">❌ 退出</button>
          </div>
        `
      }

      // 刷新率监测
      function startRefreshRateTest() {
        enterFullscreen(refreshRateTest)
      }

      function refreshRateTest() {
        const testContainer = document.getElementById('fullscreenTest')
        let frameCount = 0
        let startTime = performance.now()
        let fps = 0

        testContainer.innerHTML = `
          <div style="width: 100%; height: 100%; background: #000; display: flex; flex-direction: column; align-items: center; justify-content: center; color: white;">
            <div class="test-title" style="font-size: 48px; font-weight: bold; margin-bottom: 20px;">刷新率测试</div>
            <div style="font-size: 32px; margin-bottom: 20px;">当前FPS: <span id="fpsCounter">0</span></div>
            <div style="width: 200px; height: 200px; background: white; animation: flashTest 0.5s infinite alternate;"></div>
          </div>
          <div class="test-controls">
            <button class="control-btn" onclick="previousTest()">⬅️ 上一个</button>
            <button class="control-btn" onclick="nextTest()">➡️ 下一个</button>
            <button class="control-btn" onclick="hideUI()">🙈 隐藏操作</button>
            <button class="control-btn" onclick="exitFullscreen()">❌ 退出</button>
          </div>
          <style>
            @keyframes flashTest {
              0% { background: white; }
              100% { background: black; }
            }
          </style>
        `

        function updateFPS() {
          frameCount++
          const currentTime = performance.now()
          if (currentTime - startTime >= 1000) {
            fps = Math.round((frameCount * 1000) / (currentTime - startTime))
            document.getElementById('fpsCounter').textContent = fps
            frameCount = 0
            startTime = currentTime
          }
          if (currentTest) {
            animationId = requestAnimationFrame(updateFPS)
          }
        }

        updateFPS()
      }

      // 残影检测
      function startGhostingTest() {
        enterFullscreen(ghostingTest)
      }

      function ghostingTest() {
        const testContainer = document.getElementById('fullscreenTest')
        testContainer.innerHTML = `
          <div style="width: 100%; height: 100%; background: #808080; position: relative;">
            <div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 300px; height: 300px; background: white; animation: ghostTest 3s ease-in-out infinite alternate;"></div>
            <div class="test-title" style="position: fixed; top: 50px; left: 50%; transform: translateX(-50%); color: black; font-size: 24px; font-weight: bold; z-index: 10001; pointer-events: none; text-align: center; white-space: nowrap;">残影检测 - 观察图像残留</div>
          </div>
          <div class="test-controls">
            <button class="control-btn" onclick="previousTest()">⬅️ 上一个</button>
            <button class="control-btn" onclick="nextTest()">➡️ 下一个</button>
            <button class="control-btn" onclick="hideUI()">🙈 隐藏操作</button>
            <button class="control-btn" onclick="exitFullscreen()">❌ 退出</button>
          </div>
          <style>
            @keyframes ghostTest {
              0% { opacity: 1; }
              50% { opacity: 0; }
              100% { opacity: 1; }
            }
          </style>
        `
      }

      // 视角一致性测试
      function startViewAngleTest() {
        enterFullscreen(viewAngleTest)
      }

      function viewAngleTest() {
        const testContainer = document.getElementById('fullscreenTest')
        testContainer.innerHTML = `
          <div style="width: 100%; height: 100%; background: linear-gradient(45deg, #FF0000 25%, #00FF00 25%, #00FF00 50%, #0000FF 50%, #0000FF 75%, #FFFF00 75%); background-size: 100px 100px; display: flex; align-items: center; justify-content: center;">
            <div class="test-title" style="color: white; font-size: 24px; font-weight: bold; text-shadow: 2px 2px 4px rgba(0,0,0,0.8); text-align: center; pointer-events: none;">
              视角一致性测试<br>
              <span style="font-size: 18px;">从不同角度观察色彩变化</span>
            </div>
          </div>
          <div class="test-controls">
            <button class="control-btn" onclick="previousTest()">⬅️ 上一个</button>
            <button class="control-btn" onclick="nextTest()">➡️ 下一个</button>
            <button class="control-btn" onclick="hideUI()">🙈 隐藏操作</button>
            <button class="control-btn" onclick="exitFullscreen()">❌ 退出</button>
          </div>
        `
      }

      // 闪烁检测
      function startFlickerTest() {
        enterFullscreen(flickerTest)
      }

      function flickerTest() {
        const testContainer = document.getElementById('fullscreenTest')
        testContainer.innerHTML = `
          <div style="width: 100%; height: 100%; background: #808080; display: flex; align-items: center; justify-content: center;">
            <div class="test-title" style="color: white; font-size: 24px; font-weight: bold; text-align: center; pointer-events: none;">
              闪烁检测<br>
              <span style="font-size: 18px;">观察屏幕是否有闪烁现象</span>
            </div>
          </div>
          <div class="test-controls">
            <button class="control-btn" onclick="previousTest()">⬅️ 上一个</button>
            <button class="control-btn" onclick="nextTest()">➡️ 下一个</button>
            <button class="control-btn" onclick="hideUI()">🙈 隐藏操作</button>
            <button class="control-btn" onclick="exitFullscreen()">❌ 退出</button>
          </div>
        `
      }

      // 信号稳定性测试
      function startSignalTest() {
        enterFullscreen(signalTest)
      }

      function signalTest() {
        const testContainer = document.getElementById('fullscreenTest')
        testContainer.innerHTML = `
          <div style="width: 100%; height: 100%; background: repeating-linear-gradient(0deg, #000 0px, #000 2px, #fff 2px, #fff 4px); display: flex; align-items: center; justify-content: center;">
            <div class="test-title" style="background: rgba(0,0,0,0.8); color: white; font-size: 24px; font-weight: bold; padding: 20px; border-radius: 10px; text-align: center; pointer-events: none;">
              信号稳定性测试<br>
              <span style="font-size: 18px;">观察条纹是否稳定清晰</span>
            </div>
          </div>
          <div class="test-controls">
            <button class="control-btn" onclick="previousTest()">⬅️ 上一个</button>
            <button class="control-btn" onclick="nextTest()">➡️ 下一个</button>
            <button class="control-btn" onclick="hideUI()">🙈 隐藏操作</button>
            <button class="control-btn" onclick="exitFullscreen()">❌ 退出</button>
          </div>
        `
      }

      // 文字清晰度与彩边测试
      function startTextSharpnessTest() {
        enterFullscreen(textSharpnessTest)
      }

      function textSharpnessTest() {
        const testContainer = document.getElementById('fullscreenTest')
        testContainer.innerHTML = `
          <div style="width:100%;height:100%;display:flex;">
            <div style="flex:1;background:#000;color:#fff;display:flex;align-items:center;justify-content:center;flex-direction:column;">
              <div class="test-title" style="position: fixed; top: 50px; left: 50%; transform: translateX(-50%); color: #fff; font-size: 24px; font-weight: bold; z-index: 10001; pointer-events: none; text-align: center;">文字清晰度与彩边测试</div>
              <div style="text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased;">
                <div style="font-size:36px;font-weight:100;margin:8px 0;">极细中文与英文 ABCabc123</div>
                <div style="font-size:24px;font-weight:400;margin:8px 0;">标准中文与英文 ABCabc123</div>
                <div style="font-size:16px;font-weight:100;margin:8px 0;">极细小号文本 ABCabc123</div>
                <div style="font-size:12px;font-weight:400;margin:8px 0;">标准小号文本 ABCabc123</div>
              </div>
            </div>
            <div style="flex:1;background:#fff;color:#000;display:flex;align-items:center;justify-content:center;flex-direction:column;">
              <div style="text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased;">
                <div style="font-size:36px;font-weight:100;margin:8px 0;">极细中文与英文 ABCabc123</div>
                <div style="font-size:24px;font-weight:400;margin:8px 0;">标准中文与英文 ABCabc123</div>
                <div style="font-size:16px;font-weight:100;margin:8px 0;">极细小号文本 ABCabc123</div>
                <div style="font-size:12px;font-weight:400;margin:8px 0;">标准小号文本 ABCabc123</div>
              </div>
            </div>
          </div>
          <div class="test-controls">
            <button class="control-btn" onclick="previousTest()">⬅️ 上一个</button>
            <button class="control-btn" onclick="nextTest()">➡️ 下一个</button>
            <button class="control-btn" onclick="hideUI()">🙈 隐藏操作</button>
            <button class="control-btn" onclick="exitFullscreen()">❌ 退出</button>
          </div>
        `
      }

      // 精细线条分离度测试
      function startFineLineSeparationTest() {
        // 全屏循环不同密度与方向的线条图样
        testSequence = [
          {
            bg: 'repeating-linear-gradient(90deg,#fff 0,#fff 1px,#000 1px,#000 2px)',
            label: '垂直 1px/1px',
          },
          {
            bg: 'repeating-linear-gradient(90deg,#fff 0,#fff 2px,#000 2px,#000 4px)',
            label: '垂直 2px/2px',
          },
          {
            bg: 'repeating-linear-gradient(90deg,#fff 0,#fff 3px,#000 3px,#000 6px)',
            label: '垂直 3px/3px',
          },
          {
            bg: 'repeating-linear-gradient(0deg,#fff 0,#fff 1px,#000 1px,#000 2px)',
            label: '水平 1px/1px',
          },
          {
            bg: 'repeating-linear-gradient(0deg,#fff 0,#fff 2px,#000 2px,#000 4px)',
            label: '水平 2px/2px',
          },
          {
            bg: 'repeating-linear-gradient(45deg,#fff 0,#fff 2px,#000 2px,#000 4px)',
            label: '斜向 45° 2px/2px',
          },
        ]
        currentTestIndex = 0
        enterFullscreen(fineLineSeparationTest)
      }

      function fineLineSeparationTest() {
        const testContainer = document.getElementById('fullscreenTest')
        const cfg = testSequence[currentTestIndex]
        testContainer.innerHTML = `
          <div style="width:100%;height:100%;background:${cfg.bg};"></div>
          <div class="test-title" style="position: fixed; top: 50px; left: 50%; transform: translateX(-50%); font-size: 24px; font-weight: bold; z-index: 10001; text-align: center;">精细线条分离度测试 - ${cfg.label}</div>
          <div class="test-controls">
            <button class="control-btn" onclick="previousTest()">⬅️ 上一个</button>
            <button class="control-btn" onclick="nextTest()">➡️ 下一个</button>
            <button class="control-btn" onclick="hideUI()">🙈 隐藏操作</button>
            <button class="control-btn" onclick="exitFullscreen()">❌ 退出</button>
          </div>
        `
      }

      // 低亮度均匀性与脏屏效应测试
      function startLowBrightnessUniformityTest() {
        testSequence = ['#0d0d0d', '#141414', '#1a1a1a']
        currentTestIndex = 0
        enterFullscreen(lowBrightnessUniformityTest)
      }

      function lowBrightnessUniformityTest() {
        const testContainer = document.getElementById('fullscreenTest')
        const color = testSequence[currentTestIndex]
        testContainer.style.backgroundColor = color

        // 清理标题并添加
        const existingLabels = testContainer.querySelectorAll(
          'div:not(.test-controls)'
        )
        existingLabels.forEach((l) => l.remove())

        const labels = ['5%', '7%', '10%']
        const label = document.createElement('div')
        label.className = 'test-title'
        label.style.cssText = `
          position: fixed; top: 50px; left: 50%; transform: translateX(-50%);
          color: #888; font-size: 24px; font-weight: bold; z-index: 10001;
          text-shadow: 2px 2px 4px rgba(0,0,0,0.6); pointer-events: none; text-align: center;
        `
        label.textContent = `低亮度均匀性测试 - ${labels[currentTestIndex]}`
        testContainer.appendChild(label)
      }

      // 色彩串扰测试
      function startColorCrosstalkTest() {
        testSequence = ['#FF0000', '#00FF00', '#0000FF']
        currentTestIndex = 0
        enterFullscreen(colorCrosstalkTest)
      }

      function colorCrosstalkTest() {
        const testContainer = document.getElementById('fullscreenTest')
        const color = testSequence[currentTestIndex]
        const names = ['红色', '绿色', '蓝色']
        testContainer.innerHTML = `
          <div style="width:100%;height:100%;background:#000;display:flex;align-items:center;justify-content:center;position:relative;">
            <div style="width:80%;height:80%;background:#1a1a1a;display:flex;align-items:center;justify-content:center;">
              <div style="width:80px;height:80px;background:${color};box-shadow:0 0 20px ${color};"></div>
            </div>
            <div class="test-title" style="position: fixed; top: 50px; left: 50%; transform: translateX(-50%); color: #fff; font-size: 24px; font-weight: bold; z-index: 10001; text-align: center;">色彩串扰测试 - 当前颜色：${names[currentTestIndex]}</div>
          </div>
          <div class="test-controls">
            <button class="control-btn" onclick="previousTest()">⬅️ 上一个</button>
            <button class="control-btn" onclick="nextTest()">➡️ 下一个</button>
            <button class="control-btn" onclick="hideUI()">🙈 隐藏操作</button>
            <button class="control-btn" onclick="exitFullscreen()">❌ 退出</button>
          </div>
        `
      }

      // 动态清晰度（滚动）测试
      let scrollSpeed = 60 // px/s
      function startScrollingClarityTest() {
        enterFullscreen(scrollingClarityTest)
      }

      function scrollingClarityTest() {
        const testContainer = document.getElementById('fullscreenTest')
        testContainer.innerHTML = `
          <div id="scrollArea" style="width:100%;height:100%;background:#fff;color:#000;overflow:hidden;position:relative;">
            <div class="test-title" style="position: fixed; top: 20px; left: 50%; transform: translateX(-50%); color: #000; font-size: 24px; font-weight: bold; z-index: 10001; text-align: center;">动态清晰度（滚动）测试</div>
            <div id="speedHUD" style="position: fixed; top: 20px; right: 20px; z-index: 10001; background: rgba(0,0,0,0.5); color: #fff; padding: 8px 12px; border-radius: 10px;">速度: <span id="speedValue">${scrollSpeed}</span> px/s（↑/↓调节）</div>
            <div id="scrollContent" style="position:absolute; top:0; left:50%; transform: translateX(-50%); width:60%; line-height:1.8; font-size:20px;">
              <p>这是一段用于动态清晰度检测的示例文本。请在不同速度下观察文字是否仍可清晰辨认。</p>
              <p>Dynamic clarity test sample paragraph. Observe at various speeds whether text remains legible without significant motion blur.</p>
              <p>中文、英文与数字混排：ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789。</p>
              <p>在更高速度下，低响应的屏幕容易出现拖影与模糊，影响阅读体验。</p>
              <p>请使用键盘↑/↓键或修改显示器运动清晰度相关设置进行对比。</p>
              <p>这是一段用于动态清晰度检测的示例文本。请在不同速度下观察文字是否仍可清晰辨认。</p>
              <p>Dynamic clarity test sample paragraph. Observe at various speeds whether text remains legible without significant motion blur.</p>
              <p>中文、英文与数字混排：ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789。</p>
              <p>在更高速度下，低响应的屏幕容易出现拖影与模糊，影响阅读体验。</p>
              <p>请使用键盘↑/↓键或修改显示器运动清晰度相关设置进行对比。</p>
            </div>
          </div>
          <div class="test-controls">
            <button class="control-btn" onclick="previousTest()">⬅️ 上一个</button>
            <button class="control-btn" onclick="nextTest()">➡️ 下一个</button>
            <button class="control-btn" onclick="hideUI()">🙈 隐藏操作</button>
            <button class="control-btn" onclick="exitFullscreen()">❌ 退出</button>
          </div>
        `

        const content = document.getElementById('scrollContent')
        let last = performance.now()

        function step(now) {
          const dt = (now - last) / 1000
          last = now
          const currentTop = parseFloat(content.style.top || '0')
          const nextTop = currentTop - scrollSpeed * dt
          content.style.top = `${nextTop}`
          const totalHeight = content.scrollHeight
          if (-nextTop > totalHeight) {
            content.style.top = '0'
          }
          if (currentTest === scrollingClarityTest) {
            animationId = requestAnimationFrame(step)
          }
        }

        animationId = requestAnimationFrame(step)
      }

      // PWM调光闪烁检测（视觉方法）
      function startPWMSwingTest() {
        enterFullscreen(pwmswingTest)
      }

      function pwmswingTest() {
        const testContainer = document.getElementById('fullscreenTest')
        testContainer.innerHTML = `
          <div style="width:100%;height:100%;background:#000;position:relative;overflow:hidden;">
            <div class="test-title" style="position: fixed; top: 50px; left: 50%; transform: translateX(-50%); color: #fff; font-size: 24px; font-weight: bold; z-index: 10001; text-align: center;">PWM调光闪烁检测（视觉） - 用手机摄像头或晃笔观察是否有重影/扫描线</div>
            <div id="pwmDot" style="position:absolute; top:50%; left:0; width:16px; height:16px; background:#fff; border-radius:50%; transform:translate(-50%, -50%);"></div>
          </div>
          <div class="test-controls">
            <button class="control-btn" onclick="previousTest()">⬅️ 上一个</button>
            <button class="control-btn" onclick="nextTest()">➡️ 下一个</button>
            <button class="control-btn" onclick="hideUI()">🙈 隐藏操作</button>
            <button class="control-btn" onclick="exitFullscreen()">❌ 退出</button>
          </div>
        `

        const dot = document.getElementById('pwmDot')
        let t0 = performance.now()
        function animate(now) {
          const t = (now - t0) / 1000
          const x =
            (Math.sin(t * 6.0) * 0.5 + 0.5) * (window.innerWidth + 100) - 50
          dot.style.left = `${x}px`
          // 模拟亮度快速变化（高频闪烁）
          const flicker = Math.sin(t * 50.0) * 0.5 + 0.5
          dot.style.opacity = `${0.4 + 0.6 * flicker}`
          if (currentTest === pwmswingTest) {
            animationId = requestAnimationFrame(animate)
          }
        }
        animationId = requestAnimationFrame(animate)
      }

      // 梯度带宽测试
      function startGradientBandwidthTest() {
        // 全屏循环不同频率与角度的条纹/渐变图样
        testSequence = [
          {
            bg: 'repeating-linear-gradient(90deg,#000 0,#000 1px,#fff 1px,#fff 2px)',
            label: '垂直 1px/1px',
          },
          {
            bg: 'repeating-linear-gradient(90deg,#000 0,#000 2px,#fff 2px,#fff 4px)',
            label: '垂直 2px/2px',
          },
          {
            bg: 'repeating-linear-gradient(0deg,#000 0,#000 1px,#fff 1px,#fff 2px)',
            label: '水平 1px/1px',
          },
          {
            bg: 'repeating-linear-gradient(45deg,#000 0,#000 2px,#fff 2px,#fff 4px)',
            label: '斜向 45° 2px/2px',
          },
          {
            bg: 'repeating-linear-gradient(135deg,#000 0,#000 3px,#fff 3px,#fff 6px)',
            label: '斜向 135° 3px/3px',
          },
          {
            bg: 'repeating-conic-gradient(#000 0 45deg,#fff 45deg 90deg)',
            label: '圆锥交替 45°',
          },
        ]
        currentTestIndex = 0
        enterFullscreen(gradientBandwidthTest)
      }

      function gradientBandwidthTest() {
        const testContainer = document.getElementById('fullscreenTest')
        const cfg = testSequence[currentTestIndex]
        testContainer.innerHTML = `
          <div style="width:100%;height:100%;background:${cfg.bg};"></div>
          <div class="test-title" style="position: fixed; top: 50px; left: 50%; transform: translateX(-50%); font-size: 24px; font-weight: bold; z-index: 10001; text-align: center;">梯度带宽测试 - ${cfg.label}</div>
          <div class="test-controls">
            <button class="control-btn" onclick="previousTest()">⬅️ 上一个</button>
            <button class="control-btn" onclick="nextTest()">➡️ 下一个</button>
            <button class="control-btn" onclick="hideUI()">🙈 隐藏操作</button>
            <button class="control-btn" onclick="exitFullscreen()">❌ 退出</button>
          </div>
        `
      }

      // 显示器预设模式对比
      function startPresetModeComparisonTest() {
        enterFullscreen(presetModeComparisonTest)
      }

      function presetModeComparisonTest() {
        const testContainer = document.getElementById('fullscreenTest')
        testContainer.innerHTML = `
          <div style="width:100%;height:100%;background:#fff;color:#000;display:flex;align-items:center;justify-content:center;">
            <div style="width:85%;display:grid;grid-template-columns:2fr 2fr 1fr;gap:24px;">
              <div style="background:linear-gradient(180deg,#fce4ec,#fff);display:flex;align-items:center;justify-content:center;border:1px solid #ddd;">
                <div style="text-align:center;color:#333;">
                  <div class="test-title" style="font-size:22px;font-weight:bold;">标准测试图 - 人像模拟</div>
                  <div style="margin-top:8px;font-size:14px;color:#666;">用于观察肤色、色彩还原与对比度</div>
                </div>
              </div>
              <div style="background:linear-gradient(90deg,#000,#555,#999,#ddd,#fff);display:flex;align-items:center;justify-content:center;border:1px solid #ddd;">
                <div style="text-align:center;color:#fff;">
                  <div style="font-size:22px;font-weight:bold;">灰阶与对比度区域</div>
                  <div style="margin-top:8px;font-size:14px;color:#eee;">用于观察灰阶平滑与细节保留</div>
                </div>
              </div>
              <div style="background:#fff;border:1px solid #ddd;padding:12px;">
                <div style="font-size:16px;font-weight:bold;">使用提示</div>
                <div style="font-size:14px;color:#666;line-height:1.6;margin-top:8px;">请依次切换显示器预设模式（sRGB / 影院 / 游戏 / 标准），观察人物肤色、灰阶、文字对比与色彩饱和度的变化，选择最准确或最舒适的模式。</div>
              </div>
            </div>
          </div>
          <div class="test-controls">
            <button class="control-btn" onclick="previousTest()">⬅️ 上一个</button>
            <button class="control-btn" onclick="nextTest()">➡️ 下一个</button>
            <button class="control-btn" onclick="hideUI()">🙈 隐藏操作</button>
            <button class="control-btn" onclick="exitFullscreen()">❌ 退出</button>
          </div>
        `
      }

      // 测试导航
      function nextTest() {
        if (testSequence.length > 0) {
          currentTestIndex = (currentTestIndex + 1) % testSequence.length
          if (currentTest) {
            currentTest()
          }
        }
      }

      function previousTest() {
        if (testSequence.length > 0) {
          currentTestIndex =
            currentTestIndex > 0
              ? currentTestIndex - 1
              : testSequence.length - 1
          if (currentTest) {
            currentTest()
          }
        }
      }

      // 键盘事件处理
      document.addEventListener('keydown', function (e) {
        if (currentTest) {
          switch (e.key) {
            case 'Escape':
              exitFullscreen()
              break
            case 'ArrowRight':
              nextTest()
              break
            case 'ArrowLeft':
              previousTest()
              break
            case 'ArrowUp':
              if (currentTest === scrollingClarityTest) {
                scrollSpeed = Math.min(scrollSpeed + 20, 400)
                const el = document.getElementById('speedValue')
                if (el) el.textContent = scrollSpeed
              }
              break
            case 'ArrowDown':
              if (currentTest === scrollingClarityTest) {
                scrollSpeed = Math.max(scrollSpeed - 20, 10)
                const el = document.getElementById('speedValue')
                if (el) el.textContent = scrollSpeed
              }
              break
          }
        }
      })

      // 已移除：launch-date 自动写入逻辑（不再需要）

      // 如果用户通过浏览器的默认行为退出全屏（例如按ESC），也关闭测试
      document.addEventListener('fullscreenchange', function () {
        const testContainer = document.getElementById('fullscreenTest')
        if (
          !document.fullscreenElement &&
          currentTest &&
          testContainer.style.display === 'flex'
        ) {
          exitFullscreen()
        }
      })

      // 点击切换下一项（除控制栏区域外），最后一项循环到开头
      document
        .getElementById('fullscreenTest')
        .addEventListener('click', function (e) {
          // 如果点击在控制栏内，则忽略，由按钮逻辑处理
          if (e.target.closest('.test-controls')) return

          // 仅当当前测试存在并且有序列时，点击切换下一项
          if (currentTest && testSequence.length > 0) {
            nextTest()
          }
        })

      // 页面加载完成后初始化
      document.addEventListener('DOMContentLoaded', function () {
        initScreenInfo()
      })
    </script>
    <script>
      // 点击“？”显示说明：使用全局固定层，避免被父级裁剪
      ;(function () {
        const tooltip = document.createElement('div')
        tooltip.id = 'globalTooltip'
        tooltip.setAttribute('role', 'tooltip')
        tooltip.setAttribute('aria-hidden', 'true')
        document.body.appendChild(tooltip)

        let activeIcon = null

        function placeTooltipNearIcon(icon) {
          const rect = icon.getBoundingClientRect()
          const top = rect.top + rect.height / 2
          // 初步放在图标右侧 12px
          tooltip.style.top = top + 'px'
          tooltip.style.left = rect.right + 12 + 'px'
          tooltip.classList.add('visible')
          tooltip.setAttribute('aria-hidden', 'false')
          // 防止右侧溢出，进行一次修正
          const width = tooltip.offsetWidth
          const maxLeft = window.innerWidth - width - 12
          const currentLeft = rect.right + 12
          if (currentLeft > maxLeft) {
            tooltip.style.left = maxLeft + 'px'
          }
        }

        function showTooltip(icon, content) {
          tooltip.textContent = content || ''
          tooltip.classList.remove('visible')
          tooltip.setAttribute('aria-hidden', 'true')
          // 放置并显示
          placeTooltipNearIcon(icon)
          activeIcon = icon
        }

        function hideTooltip() {
          tooltip.classList.remove('visible')
          tooltip.setAttribute('aria-hidden', 'true')
          activeIcon = null
        }

        // 点击图标切换显示
        document.addEventListener('click', function (e) {
          const icon = e.target.closest('.help-icon')
          if (icon) {
            const tipEl =
              icon.nextElementSibling &&
              icon.nextElementSibling.classList &&
              icon.nextElementSibling.classList.contains('tooltip')
                ? icon.nextElementSibling
                : null
            const content = tipEl
              ? (tipEl.textContent || '').trim()
              : icon.getAttribute('data-tip') || ''

            if (activeIcon === icon && tooltip.classList.contains('visible')) {
              hideTooltip()
            } else {
              showTooltip(icon, content)
            }
            e.stopPropagation()
            return
          }
          // 点击其他区域关闭
          if (!tooltip.contains(e.target)) {
            hideTooltip()
          }
        })

        // 键盘可访问性：Enter/Space 切换，ESC 关闭
        document.addEventListener('keydown', function (e) {
          if (e.key === 'Escape') {
            hideTooltip()
            return
          }
          if (
            (e.key === 'Enter' || e.key === ' ') &&
            document.activeElement &&
            document.activeElement.classList &&
            document.activeElement.classList.contains('help-icon')
          ) {
            e.preventDefault()
            const icon = document.activeElement
            const tipEl =
              icon.nextElementSibling &&
              icon.nextElementSibling.classList &&
              icon.nextElementSibling.classList.contains('tooltip')
                ? icon.nextElementSibling
                : null
            const content = tipEl
              ? (tipEl.textContent || '').trim()
              : icon.getAttribute('data-tip') || ''

            if (tooltip.classList.contains('visible')) {
              hideTooltip()
            } else {
              showTooltip(icon, content)
            }
          }
        })

        // 滚动时关闭；窗口尺寸变化时跟随重定位
        window.addEventListener('scroll', hideTooltip, { passive: true })
        window.addEventListener('resize', function () {
          if (activeIcon && tooltip.classList.contains('visible')) {
            placeTooltipNearIcon(activeIcon)
          }
        })
      })()
    </script>
  </body>
</html>
